<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app" class="app paa" data-num="12345" data-str="qwewqeq">
    <button id="btn"></button>
    <div class="list">
      <div class="item" name="color">11</div>
      <div class="item">22</div>
      <div class="item">33</div>
      <div class="item">44</div>
      <div class="item">55</div>
      <div class="item">66</div>
    </div>
  </div>
  <script>
    //  console.log(document.querySelector('.item'))  // 返回第一个
    //  console.log(document.querySelectorAll('.item'))  // 返回所有NodeList类型
    //  console.log(document.body.matches("body"))   // 接受css选择符,判断是否会被querySelector和querySelectorAll返回

    // console.log(document.getElementsByClassName("paa app")) // 获取class值得dom。若有多个class值，顺序无所谓
    const listDom = document.getElementsByClassName('list')[0]; // 
    // console.log(listDom.firstChild)        // 第一个子节点
    // console.log(listDom.firstElementChild)        // 第一个Element类型的子节点
    // console.log(listDom.lastElementChild)        //  最后一个Element类型的子节点
    // console.log(listDom.childElementCount)        //  Element类型的子节点的数量
    // console.log(listDom.lastElementChild.previousElementSibling)        // 上一个兄弟节点lement类型的
    // console.log(listDom.firstElementChild.nextElementSibling)        //  下一个兄弟节点Element类型的


    // class的add、contains、remove、toggle

    // console.log(listDom.classList)   // 返回DOMTokenList 类型 类数组
    // listDom.classList.add('masd')    // 添加一个class
    // console.log(listDom.className)    
    // console.log(listDom.classList.contains('masd'))    // 判断是否有这个class值
    // listDom.classList.remove('masd')    //  移除一个class值
    // console.log(listDom.className)
    // listDom.classList.toggle('masd')    //  如果没有则添加这个class值
    // console.log(listDom.className)
    // listDom.classList.toggle('masd')    //  如果有则删除这个class值
    // console.log(listDom.className)

    // const btnDom = document.getElementById('btn');
    // console.log(document.activeElement)  // 文档当前的焦点dom
    // console.log(document.hasFocus())     // 文档当前是否有焦点dom
    // btnDom.focus()
    // console.log(document.activeElement)
    // console.log(document.hasFocus())


    // console.log(document.readyState)  // 页面加载中返回loading
    // setTimeout(() => {
    //   console.log(document.readyState)  // 页面加载完成返回complete
    // }, 1000)

    // console.log(document.compatMode)  // 渲染模式：标准返回CSS1Compat、混杂模式返回BackCompat
    // setTimeout(() => {
    //   console.log(document.compatMode)  
    // }, 1000)

    // console.log(document.head)   // head   Dom

    // console.log(document.characterSet)   // 字符集

    const appD = document.getElementById('app')
    // console.log(appD.dataset.num)   //  dataset dom上所有data-开头的属性
    // console.log(appD.dataset.str)
    // appD.dataset.str = 'zxcxzcx'    // 可修改
    // console.log(appD.dataset.str)

    // 用字符串富文本的方式改变dom内容
    // appD.innerHTML = "<b>12321321</b>"
    // console.log(appD.innerHTML)  // 子元素 string类型

    // appD.outerHTML = "<b>12321321</b>"  
    // console.log(appD.outerHTML)  // 自身和子元素  string

    // innerHTML和outerHTML的性能问题：删除元素的同时需要删除掉相关联的事件和js对象，避免内存浪费
    // inndeHTML和outerHTML的安全问题：XSS攻击，使用时需要用相关库对其进行转义



  
  </script>
</body>

</html>